const con = document.querySelector('.container');

let isIn = true;
let isOut = false;

var sapn;
con.addEventListener('mouseenter', function (e) {
    if (isIn) {
        let inX = e.clientX - e.target.offsetLeft;
        let inY = e.clientY - e.target.offsetTop;

        let el = document.createElement('span');
        el.style.left = inX + 'px';
        el.style.top = inY + 'px';
        con.appendChild(el);

        $('.container span').removeClass('out');
        $('.container span').addClass('in');
        console.log(con);

        sapn = document.querySelector('.container span');

        isIn = false;
        isOut = true;

    }
});
con.addEventListener('mouseleave', function (e) {
    if (isOut) {
        let outX = e.clientX - e.target.offsetLeft;
        let outY = e.clientY - e.target.offsetTop;

        $('.container span').removeClass('in');
        $('.container span').addClass('out');

        $('.out').css('left', outX + 'px');
        $('.out').css('top', outY + 'px');

        isOut = false;
        setTimeout(function () {
            console.log(con);
            con.removeChild(con.getElementsByTagName("span")[0]);
            isIn = true;
        }, 500)
    }
});